<template>
  <div class="wp">
        <div class="head">
        <img src="@/assets/2_25.png" class="pic_1" @click="back"/>
        <h3>作者</h3>
        <img src="@/assets/2_2.png" class="pic_2" />
      </div>
    <div class="head-r"></div>
    <div class="row-a1-au">
     <ul class="ul-au">
        <li class="l1">
        <img src="@/assets/7_6.png" class="pic_3" />
        <h4 class="name-au">余秋雨</h4>
        <h5 class="hot-au">5869 粉丝</h5>
        </li>
         <li class="l2">
        <img src="@/assets/7_5.png" class="pic_4" />
        <h4 class="name-au1">刘慈心</h4>
        <h5 class="hot-au">6459 粉丝</h5>
        </li>
         <li class="l3">
        <img src="@/assets/7_7.png" class="pic_5" />
        <h4 class="name-au2">田小花</h4>
        <h5 class="hot-au">4562 粉丝</h5>
        </li>
     </ul>
        <img src="@/assets/7_8.png" class="pic_6" />
        <img src="@/assets/7_9.png" class="pic_7" />
        <img src="@/assets/7_10.png" class="pic_8" />
        <h5 class="num-au1">1</h5>
        <h5 class="num-au2">2</h5>
        <h5 class="num-au3">3</h5>
    </div>
    <div class="row-a2-au">
      <h3>热门作者<img src="@/assets/2_jt.png" /> <span>查看全部</span></h3>
      <van-tabs v-model="active">
        <van-tab v-for="(item, index) in fenlei" :key="index" >
          <template #title>
            <van-image :src="item.img"  class="pic" @click="dj(item.id)"/>
            <h4 class="text-au">{{ item.text }}</h4>
            <h5 class="guanzhu-au">已关注</h5>
          </template>
        </van-tab>
      </van-tabs>
    </div>
        <div class="row-a2-au">
      <h3>新晋作者<img src="@/assets/2_jt.png" /> <span>查看全部</span></h3>
      <van-tabs v-model="active">
        <van-tab v-for="(item, index) in fenlei" :key="index" >
          <template #title>
            <van-image :src="item.img"  class="pic" @click="dj(item.id)"/>
            <h4 class="text-au">{{ item.text }}</h4>
            <h5 class="guanzhu-au">已关注</h5>
          </template>
        </van-tab>
      </van-tabs>
    </div>
        <div class="row-a2-au">
      <h3>其他作者<img src="@/assets/2_jt.png" /> <span>查看全部</span></h3>
      <van-tabs v-model="active">
        <van-tab v-for="(item, index) in fenlei" :key="index" >
          <template #title>
            <van-image :src="item.img"  class="pic" @click="dj(item.id)"/>
            <h4 class="text-au">{{ item.text }}</h4>
            <h5 class="guanzhu-au">已关注</h5>
          </template>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  // 定义属性
  data() {
    return {
            fenlei: [
        { id: '1',
          img:require ('@/assets/7_1.png'),
          text: '王圆圆'
        },
        { 
          id: '2',
          img:require ('@/assets/7_2.png'),
          text: '张晓佳'
        },
        {  
          id: '3',
          img:require ('@/assets/7_3.png'),
          text: '谢花影'
        },
        {  
          id: '4',
          img:require ('@/assets/7_4.png'),
          text: '李小军'
        },
        { id: '5',
          img:require ('@/assets/7_1.png'),
          text: '王圆圆'
        },
        { 
          id: '6',
          img:require ('@/assets/7_2.png'),
          text: '张晓佳'
        },
        {  
          id: '7',
          img:require ('@/assets/7_3.png'),
          text: '谢花影'
        },
        {  
          id: '8',
          img:require ('@/assets/7_4.png'),
          text: '李小军'
        }
      ],
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
        back(){
        this.$router.go(-1);//返回上一层
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    
  }
}
</script>

<style lang='less'>
   .head {
  width: 100%;
  height: 200px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #21272e;
  z-index: 999;
  .pic_1 {
    width: 34px;
    height: 33px;
    margin-top: 112px;
    margin-left: 48px;
  }
  .pic_2 {
    float: right;
    width: 34px;
    height: 28px;
    margin-top: 114px;
    margin-right: 48px;
  }
  h3{
    position: absolute;
    left: 50%;
    top: 95px;
    transform: translate(-50%);
    	font-size: 44px;
	    font-weight: normal;
    	font-stretch: normal;
    	letter-spacing: 0px;
    	color: #ffffff;
  }
}
.head-r {
  height: 200px;
}
.row-a1-au{
    overflow: hidden;
    .ul-au{
        overflow: hidden;
        text-align: center;
        padding-bottom: 30px;
        margin-top: 80px;
        border-bottom: 2px solid #343946;
        li{
            float: left;
        }
        .name-au{
	font-size: 36px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #f44380;
        }
        .hot-au{
    font-size: 28px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #a2a8ba;
        }
        .name-au1{
	font-size: 36px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #fdaf01;
                }
        .name-au2{
	    font-size: 36px;
	    font-weight: normal;
	    font-stretch: normal;
	    letter-spacing: 0px;
	    color: #00a2ff;
            }
        .pic_3{
        width: 160px;
        }
        .pic_4{
        width: 200px;
        }
        .pic_5{
        width: 160px;
        }
        .l1{
            padding-left: 68px;
            margin-top: 15px;
        }
        .l2{
            padding-left: 50px;
        }
        .l3{
            padding-left: 50px;
            margin-top: 15px;
        }      
    }
     .pic_7{
        position: absolute;
        top: 258px;
        left: 118px;
        width: 60px;
        }
        .pic_6{
        position: absolute;
        top: 220px;
        left: 325px;
        width: 100px;
        }
        .pic_8{
        position: absolute;
        top: 258px;
        right: 110px;
        width: 60px;
        }
        .num-au1{
        position: absolute;
        left: 360px;
        top: 455px;
    border-radius: 50%;
    text-align: center;
    line-height: 34px;
	width: 34px;
	height: 34px;
	background-color: #fdaf01;
	border: solid 3px #ffffff;
    font-size: 24px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #ffffff;
        }
        .num-au2{
    position: absolute;
    left: 127px;
    top: 432px;
    border-radius: 50%;
    text-align: center;
    line-height: 34px;
    width: 34px;
	height: 34px;
	background-color: #f44380;
	border: solid 3px #ffffff;
    font-size: 24px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #ffffff;
        }
        .num-au3{
            position: absolute;
            top: 432px;
            right: 120px;
    border-radius: 50%;
    text-align: center;
    line-height: 34px;
    width: 34px;
	height: 34px;
	background-color: #00a2ff;
	border: solid 3px #ffffff;
    font-size: 24px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #ffffff;
        }
}
.row-a2-au {
  overflow: hidden;
  border-bottom:6px solid  #2f343c ;
  margin-left: 50px;
  h3 {
    margin-top: 40px;
    font-size: 36px;
    font-weight: normal;
    color: #ffffff;
    span {
      float: right;
      margin-top: 3px;
      margin-right: 10px;
      font-size: 26px;
      color: #a2a8ba;
    }
    img {
      float: right;
      width: 10px;
      margin-top: 12px;
      margin-right: 50px;
    }
  }
  .van-tabs__nav--line{
 background-color: #21272e;
 margin-top: 50px;
}
.van-tabs--line .van-tabs__wrap{
  height: 100%;
}
.van-tabs__line{
  display: none;
}
.van-tabs__wrap--scrollable .van-tab{
  padding: 0;
  padding-right: 30px;
}
.van-tabs__nav--complete{
  padding-left: 0;
  padding-bottom: 45px;
}
.text-au{
  text-align: center;
  font-size: 30px;
  color: #ffffff;
}
.guanzhu-au{
    margin-top: 20px;
    margin-left: 20px;
    text-align: center;
    line-height: 44px;
    width: 120px;
	height: 44px;
	border-radius: 8px;
	border: solid 2px #545c66;
    font-size: 24px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #ffffff;
}
}
</style>